<template>
	<view :style="[AppSkinVar]">
		<view class="info-popup">
			<!-- 需要使用 button 来授权登录 -->
			<view class="popup-cont">
				<view class="u-flex-x-center">
					<image :src="logo||'https://image.sanxininfo.com/file/20230208/167583910760589756.png'"></image>
				</view>
				<text class="desc">{{ `中匼优品${$t('public.授权提示1')}中匼优品${$t('public.授权提示2')}` }}</text>
				<text class="info">{{ $t('public.授权提示3') }}</text>
				<button class="login-btn bg-primary" :style="[boxShadowColor]" @tap="getUserProfile">{{ $t('public.授权登录') }}</button>
				<!-- <button class="login-btn bg-primary" :style="[boxShadowColor]" open-type="getAuthorize" scope="userInfo"
					@getAuthorize="getUserProfile">{{ $t('public.授权登录') }}</button> -->
			</view>
		</view>
		<!-- 绑定手机号弹窗 -->
		<u-modal :show="show" :title="$t('common.提示')">
			<view class="text-center u-font-32">
				{{ `中匼优品申请获取你的手机号码` }}
			</view>
			<template slot="confirmButton">
				<view class="confirmButton u-flex">
					<view class="u-flex-xy-center c-secondary" @tap="show = false">
						<text>{{ $t('common.取消') }}</text>
					</view>
					<button class="u-reset-button c-primary" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="binding" @error="handleAuthError">授权手机号</button>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import { postAliLogin, postBindPhone,getAuthorization } from '@/common/request/api';
import { IMInit, IMLogin } from '@/common/utils/IM/init';
import { develoDomain } from '@/env';
export default {
	data() {
		return {
			show: false,
			openId: '',
			logo: ''
		};
	},
	onLoad() {
		getAuthorization({
			domain: develoDomain
		}).then(async (res) => {
			if (res.code === 200) {
				this.logo = res.logo;
			}
		});
	},
	computed: {
		boxShadowColor() {
			return {
				boxShadow: `0 12rpx 24rpx 0 ${this.AppSkin.primary.replace('1)', '0.3)')}`
			};
		}
	},
	methods: {
		...mapActions(['getUserInfo', 'getCart']),
		getUserProfile(e) {
			uni.login({
				// scopes: 'auth_user',
				success: (loginRes) => {
					// this.loginCode = loginRes.authCode;
					postAliLogin({
						code: loginRes.authCode,
						salt: ''
					}).then((res) => {
						if (res.code == 200) {
							if (res.data.access_token) {
								uni.setStorageSync('token', res.data.access_token);
								this.$store.commit('setLogin', true);
								// IMInit()
								// IMLogin()
								this.getUserInfo();
								this.getCart();
								let pages = getCurrentPages();
								let prevPage = pages[pages.length - 2];
								if (!prevPage || prevPage.route === 'pages/public/account/aliLogin') {
									this.$switchTab('/pages/tabbar/index');
								} else {
									this.$back();
								}
							} else {
								this.openId = res.data.aliUserId;
								console.log(this.openId);
								this.show = true;
							}
						} else {
							this.$toast(res.msg);
						}
					});
				},
				fail: (res) => {
					console.log(res);
					// uni.hideLoading()
				}
			});

			// my.getOpenUserInfo({
			// 	success: (res) => {
			// 		let userInfo = JSON.parse(res.response).response
			// 		console.log(userInfo, res)
			// 		return

			// 	},
			// 	fail: (err) => {
			// 		console.log(err)
			// 	}
			// });
		},
		refuse() {
			this.show = false;
			this.$goTo('/pages/public/account/binding', {
				id: this.openId
			});
		},
		handleAuthError() {
			this.show = false;
		},
		binding(e) {
			this.show = false;
			uni.showLoading({
				title: 'loading...'
			});

			my.getPhoneNumber({
				success: (res) => {
					let encryptedData = res.response;
					let params = {
						response: encryptedData,
						aliUserId: this.openId
					};
					let salt = uni.getStorageSync('userSalt');
					if (salt) {
						params['salt'] = salt;
					}
					postBindPhone(params).then((res) => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.setStorageSync('token', res.data.access_token);
							this.$store.commit('setLogin', true);
							this.getUserInfo();
							this.getCart();
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							if (!prevPage || prevPage.route === 'pages/public/account/aliLogin') {
								this.$switchTab('/pages/tabbar/index');
							} else {
								this.$back(1);
							}
							uni.removeStorageSync('userSalt');
						}
						this.$toastApp(res.msg);
					});
				},
				fail: (res) => {
					console.log(res);
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}

.info-popup {
	width: 100vw;
	background: #fff;
	box-sizing: border-box;
	padding-top: 142rpx;
}

.info-popup .desc {
	font-size: 30rpx;
	display: block;
	color: #333333;
	line-height: 46rpx;
	padding-top: 40rpx;
}

.info-popup .info {
	font-size: 26rpx;
	display: block;
	color: #cacacb;
	line-height: 40rpx;
	padding-top: 20rpx;
}

.info-popup .info:before {
	content: '';
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	background: #8a8a89;
	display: inline-block;
	vertical-align: middle;
	margin-right: 20rpx;
}

.info-popup .popup-cont {
	padding: 20rpx 70rpx 20rpx;
}

.info-popup .popup-cont image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 20rpx;
}

.login-btn {
	width: 600rpx;
	height: 88rpx;
	color: #ffffff !important;
	font-size: 36rpx;
	letter-spacing: 2rpx;
	border-radius: 44rpx;
	margin: 86rpx auto 0 auto;
}

.confirmButton {
	> view,
	button {
		flex: 0 0 50%;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 36rpx;
	}
}
</style>
